import Qt 4.7
import "scripts.js" as Game

Rectangle {
    id: item1
    x: 0
    y: 0
    width: 200
    height: 200
    color: "#00000000"
    opacity: 1

    property string image : "holebg3"
    property string image2 : "hole"
    property int idNumber : 0
    property int hasMonkey : 0
    property int flipSpeed : 500

    Image {
        id: img
        x: 0
        y: 0
        width: parent.width
        height: parent.height
        z: 2
        visible: true
        source: "images/" + image2 + ".png"
    }

    Flipable {
        id: flipable
        x: 0
        y: 0
        width: parent.width
        height: parent.height

        property int angle: 0
        property bool flipped: true

        front: Image { width: parent.width; height: parent.height; source: "images/" + image + ".png" }
        back: Image { width: parent.width; height: parent.height; source: "images/holebg.png" }

        transform: Rotation {
            origin.x: flipable.width/2; origin.y: flipable.height/2
            axis.x: 0; axis.y: 1; axis.z: 0     // rotate around y-axis
            angle: flipable.angle
        }

        states: State {
            name: "back"
            PropertyChanges { target: flipable; angle: 180 }
            when: flipable.flipped
        }

        transitions: Transition {
            NumberAnimation { id: flip; properties: "angle"; duration: flipSpeed }
        }

        MouseArea {
            anchors.fill: parent
            onPressed:
            {
                if (item1.state == "hasMonkey") {
                   flipable.flipped = true;

                   if (item1.image == "holebg1")
                    Game.addScore(1,idNumber);
                   else if (item1.image == "holebg2")
                    Game.addScore(2,idNumber);
                   else if (item1.image == "holebg3")
                    Game.addScore(3,idNumber);

                }
            }
        }
    }

    states: [
        State {
            name: "hasMonkey"

            PropertyChanges {
                target: flipable
                flipped: false
            }
        }
    ]

}
